<template v-if="show">
  <div style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;opacity: 0.5">
    <img src="/background.webp">
  </div>
  <n-flex justify="center" style="margin-top: 20px;margin-bottom: 20px;">
    <n-button>新发布</n-button>
    <n-button>价钱高</n-button>
    <n-button>距离近</n-button>
  </n-flex>
  <div style="margin: 0 10%;">
  <n-grid :x-gap="12" :y-gap="8" :cols="4">
    <n-grid-item v-for="item in orderArr">
      <n-card  class="light-green" @click="showTemp(item),showModal = true" style="background-color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out)">
        <div class="top">
          <div class="left">
              <img :src="item.orderImg" style="height: 150px;width: 50%;border-radius: 20px;" >
          </div>
          <div class="right">
            <h1 style="text-align: center">{{item.orderTitle}}</h1>
            <div class="type_text">{{item.orderDescription}}</div></div>
        </div>
        <div class="bottom">
          <span style="float: left">
            <el-icon><LocationFilled /></el-icon>
          <span>{{item.endLocation}}</span>
          </span>

          <span style="float: right">{{item.creationTime}}</span>
        </div>
      </n-card>
    </n-grid-item>
  </n-grid>
    <n-modal v-model:show="showModal" style="z-index: 50;">
      <n-card
          :style="cardStyle"
          :bordered="false"
          size="huge"
          role="dialog"
          aria-modal="true"
      >
        <n-flex vertical justify="space-between" style="position: relative;height: 100%;z-index: 70">
          <n-flex vertical>
            <h1 style="text-align: center;">{{thisArr.orderType}}</h1>
            <n-space>
              <n-avatar
                  round
                  :size="40"
                  src="头像.jpg"
              />
              <div style="margin: 0 auto;font-size: 20px">{{thisArr.userName}}</div>
            </n-space>
            <n-divider>详情</n-divider>
            <div class="div-text">{{thisArr.orderDescription}}</div>
          </n-flex>
          <n-flex vertical>
            <div class="order-bottom">
            <span style="float: left">
              <el-icon><LocationFilled /></el-icon>
              <span>{{thisArr.endLocation}}</span>
            </span>
              <span style="float: right">{{thisArr.creationTime}}</span>
            </div>
            <n-button type="success" style="width: 100%" @click="cashOrder">
              ￥{{thisArr.orderPrice}}
            </n-button>
          </n-flex>
        </n-flex>
        <div style="position: absolute;top: 0;left: 0; width: 100%;height: 100%;overflow:hidden;opacity: 0.3;z-index: 50;">
          <img :src="thisArr.orderImg" style="width: 100%;height: 100%;">
        </div>
      </n-card>
    </n-modal>
  </div>
  <n-flex>
    <n-float-button position="fixed" type="primary" menu-trigger="click" style="left: 97%;top: 90%">
          <el-icon><Plus /></el-icon>
      <template #menu>
        <n-float-button @click="setLocation=true">
          <el-icon><Location /></el-icon>
        </n-float-button>
      </template>
    </n-float-button>
  </n-flex>

  <n-modal v-model:show="setLocation">
    <n-card
        style="width: 300px"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
    >
      位置信息:
      <n-select placeholder="请选择位置" v-model:value="thisLocation" :options="locationOptions"></n-select>
    </n-card>
  </n-modal>
</template>

<script setup>
import {ref, onMounted} from "vue";
import axios from "axios";
import qs from "qs";
import {useMessage} from "naive-ui";
import {loadingBar} from "../HomeView_N.vue"
import router from "@/router";

const user = ref(getUser());
const show = ref(false);

const setLocation = ref(false);

const orderTypeOptions = ref([
  {label: '拿外卖', value: '拿外卖'},
  {label: '打饭', value: '打饭'},
  {label: '取物品', value: '取物品'},
  {label: '拿快递', value: '拿快递'},
  {label: '跑腿', value: '跑腿'},
  {label: '校园送', value: '校园送'},
]);

const locationOptions = ref([
  {label: '怡园', value: '怡园'},
  {label: '憬园', value: '憬园'},
  {label: '恒园', value: '恒园'},
  {label: '恬园', value: '恬园'},
  {label: '西北教学楼', value: '西北教学楼'},
  {label: '计算机重点实验室', value: '计算机重点实验室'},
  {label: '中央教学楼', value: '中央教学楼'},
  {label: '图书馆', value: '图书馆'},
]);

const newOrder = ref({
  orderId: '',
  riderId: '',
  userId: '',
  creationTime: '',
  acceptTime: '',
  endTime: '',
  startLocation: '',
  endLocation: null,
  orderType: null,
  orderPrice: '',
  orderStatus: '',
  orderReview: '',
  orderRate: '',
  orderDescription: '',
  orderTitle:''
});

const message = useMessage();

const setOrder = () => {
  console.log(newOrder.value);
  newOrder.value.userId = loginUser.value.userId;
  newOrder.value.orderStatus = '待接单';
  let data = qs.stringify(newOrder.value);
  console.log(data);
  axios.post(BASE_URL+'/v1/order/insert',data).then((response) => {
    if (response.data.code === 2000) {
      message.success('发起订单成功!');
      setOrderShow.value = false;
      loadOrders();
    }else {
      message.error('订单发起失败咯~');
    }
  })
  console.log(data);
}

const thisLocation = ref();

const cashOrder = () => {
  newOrder.value = {};
  newOrder.value.riderId = loginUser.value.userId;
  newOrder.value.orderId = thisArr.value.orderId;
  newOrder.value.orderStatus = '进行中';
  if(thisLocation.value == null)
  {
    message.warning('优先设置位置吧~');
  }
  else{
    newOrder.value.startLocation = thisLocation.value;
    console.log(newOrder.value);
    let data = qs.stringify(newOrder.value);
    console.log(data);
    axios.post(BASE_URL+'/v1/order/insert',data).then((response) => {
      if (response.data.code === 2000) {
        message.success('接单成功!');
        showModal.value = false;
        loadOrders();
      }else {
        message.error('接单失败咯~');
      }
    })
  }
}

const loginUser = ref({userId: '', username: '', level: ''});

//定义数组保存订单信息
const orderArr = ref([]);
const loadOrders = () => {
  axios.get(BASE_URL + '/v1/order/select?orderStatus='+'待接单').then((response) => {
    if (response.data.code == 2000) {
      orderArr.value = response.data.data;
      console.log(orderArr);
      let len = orderArr.value.length;
      for(var i = 0;i < len;i++){
        if(orderArr.value[i].orderType == '拿外卖'){
          orderArr.value[i].orderImg = '/food.png';
        }else if(orderArr.value[i].orderType == '打饭'){

          orderArr.value[i].orderImg = '/hungry.png';
        }else if(orderArr.value[i].orderType == '送厕纸'){
          orderArr.value[i].orderImg = '/wc.png';0
        }else if(orderArr.value[i].orderType == '拿快递'){
          orderArr.value[i].orderImg = '/express delivery.png';
        }else if(orderArr.value[i].orderType == '跑腿'){
          orderArr.value[i].orderImg = '/runleg.png';
        }else{
          orderArr.value[i].orderImg = '/runleg.jpg';
        }
      }
      /*console.log(response.data.data);*/
      loadingBar.finish();
      show.value = true;
    } else {
      message.error(response.data.msg);
    }
  })
}



onMounted(() => {
  //一进入广场就加载订单
  if(loginUser.value.level == 10) {
    router.push('/');
  }
  loadOrders();
  loginUser.value = getUser();
});

const setOrderShow = ref(false);
const showModal = ref(false);
const thisArr = ref({
  orderType: "12313",
  tha: 21
});
const cardStyle = ref({
  //width:'600px',height:'600px',backgroundImage:`url(`+thisArr.value.orderImg+`)`,
});
const showTemp = (item) => {
  console.log(item);
  thisArr.value = item;
  console.log(thisArr.value);
  cardStyle.value = {width:'600px',height:'600px',};//,backgroundImage:`url(`+thisArr.value.orderImg+`)`,backgroundSize:'cover'
}


</script>

<style scoped>
.light-green {
  height: 200px;
  //background-color: rgba(0, 128, 0, 0.12);
  border-radius: 20px;
  padding: 0;
}

.div-text{
  white-space: normal;
 /* overflow: hidden;*/
  text-overflow: ellipsis;
  text-indent:24px;
  font-size: 20px;
}

.type_text{
  overflow: hidden;
  text-indent:24px;
  //white-space: nowrap;
  text-overflow: ellipsis;
  height: 6em;
}

.top {
  width: 100%;
  top: 10px;
  left: 10px;
  right: 10px;
  position: absolute;
  height: 150px;
}

.left {
  width: 100%;
  left: 0;
  position: absolute;
}

.right {
  width: 45%;
  left: 50%;
  margin-left: 5px;
  top: 0;
  margin-right: 5%;
  font-size: smaller;
  position: absolute;
}
.bottom{
  position: absolute;
  top: 170px;
  width: 90%;
  display: inline;
}
.order-bottom{
    position: relative;
   margin-bottom: 0;
     width: 100%;
}
</style>